<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>15-父组件传值给子组件</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        div{
            border:1px solid #CCC;
        }
    </style>
</head>
<body>
    <!-- 父组件:模板必须存在一个根标签 -->
    <template id="pTpl">
        <div>
            <h1>{{title}}</h1>
            <!-- 调用子组件:-->
            <!-- 注意:如果props中属名采用的是驼峰命名,则在v-bind绑定动态属性的时候必须使用'-'进行拆解  -->
            <!-- vue中标签和属性名都必须使用'-'拆解原来的驼峰命名方式 -->
            <child :msg-from-parent='msg' name='我是属性name的值,我是一个字符串'></child>
        </div>
        
    </template> 
    <!--子组件:模板必须存在一个根标签  -->
    <template id="cTpl">
        <div>
            <h1>{{title}}</h1>
            <!-- 获取父组件的值 -->
            <h2>父组件传过来的值是:{{msgFromParent}}</h2>
            <h2>子组件调用标签上的name属性:{{name}}</h2>
        </div>
    </template> 
    <div id="app">
        <!-- 调用父组件 -->
        <parent/>
    </div>
</body>
<script>
    // 父组件
    Vue.component('parent',{
        template:'#pTpl',
        data:function(){
            return {
                title:'父组件的标题',
                msg:'这是传给子组件的值'
            }
        },
        // 子组件
        components:{
            child:{
                // 模板
                template:'#cTpl',
                // 数据模型
                data:function(){
                    return {
                        title:'子组件标题'
                    }
                },
                //获取父组件中传过来的值
                props:['msgFromParent','name']
            }
           
        }
        
    });

    var vm=new Vue({
        el:'#app',
        data:{
        },
        methods:{
        },
        //生命周期函数
        created:function(){
        },
        mounted:function(){
        }
    });
</script>
</html>